@import (reference) "../../theme/style";

@content-padding: 3px;

.header-a {
  .flex-center;
  width: 70px;
  height: @header-height;
  color: black;
}

.case-material {
  .fixed-full;
  background-color: white;
  padding-top: @header-height;
  &-nav {
    position: relative;
    .border-bottom();
  }
  &-header {
    .flex-right;
    .border-bottom();
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: @header-height;
    & > * {
      .flex-center;
      .border-left();
      position: relative;
      width: 70px;
      height: @header-height;
      & > a {
        .header-a;
      }
    }
  }
  &-content {
    height: 100%;
    overflow: hidden;
    .cm-group {
      padding: @content-padding;
      position: relative;
      .box {
        width: calc(~'50%' - @content-padding);
        max-width: calc(~'50%' - @content-padding);
        padding: @content-padding;
        .pic {
          .border();
          position: relative;
          & > img {
            padding: 10px;
            width: 100%;
          }
        }
      }
    }
  }
  .region-select {
    position: absolute;
    top: @header-height;
    left: 0;
    right: 0;
    height: auto;
    display: block;
    z-index: @modal-zindex;
    background-color: white;
    .flex-wrapper;
    .border-bottom();
    .am-tag {
      margin: 7px;
      height: 36px;
      line-height: 36px;
      min-width: 70px;
    }
  }
  .region-hidden {
    display: none;
  }
}

.cm-upload {
  .fixed-full;
  z-index: @page-3-zindex;
  background-color: white;
  padding-top: 60px;
  .am-tag {
    margin: 7px;
    height: 36px;
    line-height: 36px;
    min-width: 70px;
  }
  &-header {
    .flex-right;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    .border-bottom();
    .cmuh-left {
      .flex-center;
      .border-left();
      position: relative;
      width: 70px;
      height: @header-height;
      & > a {
        .header-a;
      }
    }
    .cmuh-right {
      .flex-center;
      width: 70px;
      height: @header-height;
      background-color: #a0d911;
      color: white;
      &:active {
        background-color: #bae637;
      }
    }
  }
  .cmu-region {
    .border-bottom();
    position: relative;
    width: 100%;
  }
  &-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

